<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Theme | mapbox.js</title>
<script src='../../dist/mapbox.js'></script>
<script src='access_token.js'></script>
<link rel='stylesheet' href='../../dist/mapbox.css'/>
<style>
  body {margin:0; padding:0; }
  .map {
    position:absolute;
    top:0;left:0;
    width:50%;
    height:100%;
    }
    .map.dark {
      left:50%;
      }
</style>
</head>
<body>
	
<div id='map-light' class='map'></div>
<div id='map-dark' class='dark map'></div>

<script>
var mapdark = L.mapbox.map('map-dark', 'mapbox.dark')
  .addControl(L.mapbox.geocoderControl('mapbox.places', {
    position: 'topright'
  }))
  .addControl(L.mapbox.shareControl())
  .setView([37.9, -77], 5);

var maplight = L.mapbox.map('map-light', 'mapbox.light')
  .addControl(L.mapbox.geocoderControl('mapbox.places'))
  .addControl(L.mapbox.shareControl())
  .setView([37.9, -77], 5);

var feature = {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: {
        title: 'Example Marker',
        description: 'This is a single marker.'
    }
};

maplight.legendControl.addLegend('hee haw');
mapdark.legendControl.addLegend('hee haw');

mapdark.featureLayer.setGeoJSON(feature);
maplight.featureLayer.setGeoJSON(feature);
</script>
</body>
</html>
